import { Directive, HostBinding, Input, HostListener, Attribute } from '@angular/core';

@Directive({
  selector: '[greet]'
})
export class GreetDirective {
  // @HostBinding() 用来给指令所在的宿主元素设置相应的属性
  // @HostBinding() innerText = 'Hello, Everyone!';
  // @HostBinding() innerHTML = '<a title="我是a标签" href="#">Hello, Everyone!</a>';
  // @HostBinding() class = 'colorCSS';

  // @Input装饰器，接收外部的传值
  @Input() greet: string;
  // get方法
  @HostBinding() get innerText() {
    return this.greet;
  }

  // @HostListener装饰器，用来给指令的宿主元素绑定事件
  @HostListener('click', ['$event'])
  onClick(event) {
    this.greet = 'Clicked!';
  }

  // @Attribute装饰器用来获取指令所在宿主元素的属性
  constructor(@Attribute('author') public author: string){
    console.log(this.author);
  }

}